<template>
  <div class="menu_panel p2p_user_manage">
    <!--电核业务统计-->
    <div class="data_list_panel">
      <div class="module_panel audit_first">
        <div class="data_table_panel">
          <el-table :max-height="tableMaxHeight" :data="tableData" style="width: 100%;">
            <el-table-column prop="operPeopleName" label="电核人员" :label="$t('tel.telStaff')" min-width="110"></el-table-column>
            <!--仅对经理显示电核小组-->
            <el-table-column v-if="businessResultGroup" prop="team" label="电核小组" :label="$t('tel.telGroup')" min-width="120"></el-table-column>
            <el-table-column prop="lastVerifyTime" label="日期" :label="$t('BI.date')" min-width="170">
              <template slot-scope="scope">
                {{ scope.row.startTime | formatDate('yyyy-MM-dd', true) }}
                {{$t('tel.to')}}
                {{ scope.row.endTime | formatDate('yyyy-MM-dd', true) }}
              </template>
            </el-table-column>
            <el-table-column prop="checkCount" label="进件量" :label="$t('tel.haveCase')" min-width="80"></el-table-column>
            <el-table-column prop="successCount" label="通过数量" :label="$t('tel.passNumber')" min-width="120"></el-table-column>
            <el-table-column prop="refuseCount" label="拒绝数量" :label="$t('tel.refuseNumber')" width="200"></el-table-column>
            <el-table-column prop="makeRemarkCount" label="下结论数量" :label="$t('tel.conclusionNumber')" min-width="120"></el-table-column>
            <el-table-column prop="waitHandleCount" label="待跟进数" :label="$t('tel.waitFollowNumber')" min-width="120"></el-table-column>
          </el-table>
        </div>
        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

        <!--搜索面板start-->
        <div class="search_panel" v-show="showSearch">
          <div class="search_panel_title"><span class="search_panel_text" @click="$store.state.app.search.show = false"><i class="el-icon-arrow-down"></i>{{$t('p2p.search')}}</span></div>
          <div class="search_panel_form">
            <el-form ref="form" :model="form">
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="startTime" :label="$t('BI.date')">
                    <el-date-picker :editable="false" :clearable="false" v-model="form.startTime" type="date" :picker-options="pickerStartOpt">开始时间</el-date-picker>
                  </el-form-item>
                  <el-form-item class="link">
                    <span>-</span>
                  </el-form-item>
                  <el-form-item prop="endTime">
                    <el-date-picker :editable="false" :clearable="false" v-model="form.endTime" type="date" :picker-options="pickerEndOpt">结束时间</el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item prop="operPeopleName" :label="$t('tel.telStaff')"><!--电核人员-->
                    <el-select v-model="form.operPeopleName" :placeholder="$t('audit.plsChoose')" clearable>
                      <el-option v-for="opt in staffList" :label="opt.userName" :key="opt.userName" :value="opt.userName"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4" v-if="businessSearchGroup">
                  <el-form-item prop="team" :label="$t('tel.telGroup')"><!--电核小组-->
                    <el-select v-model="form.team" :placeholder="$t('audit.plsChoose')" clearable>
                      <el-option v-for="opt in groupList" :label="opt.userName" :key="opt.userName" :value="opt.userName"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="searchButton">
                  <el-button @click="search" type="primary">{{$t('common.search')}}</el-button>
                  <el-button @click="exportData" type="primary">{{$t('common.export')}}</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div><!--搜索面板end-->
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';
  import { apiConf } from '@/config/';
  import urlType from '@/api/url-type';
  import urlUtils from '@/libs/urlutils';
  import storage from '@/libs/storage';

  let that = null;
  export default {
    name: 'telBusiness',
    components: {
      Pagination
    },
    mixins: [mixin],
    data() {
      return {
        user: storage.get('user'),
        today: new Date(),
        form: {
          startTime: '',
          endTime: '',
          operPeopleName: '',
          team: '',
        },
        groupList: [],
        staffList: [],
        start: '',
        end: '',
        init: 1,
      };
    },
    computed: {
      showSearch() {
        return this.$store.state.app.search.show;
      },
      // 业务统计页面-搜索条件小组仅对经理显示
      businessSearchGroup() {
        return this.$store.getters.checkUserAuthority('/businessSearchGroup');
      },
      // 业务统计页面-搜索结果小组仅对经理显示
      businessResultGroup() {
        return this.$store.getters.checkUserAuthority('/businessResultGroup');
      },
      pickerStartOpt() {
        const form = this.form;
        return {
          disabledDate(time) {
            if (form.endTime) {
              return time.getTime() > form.endTime.getTime();
            }
            return false;
          }
        };
      },
      pickerEndOpt() {
        const form = this.form;
        return {
          disabledDate(time) {
            if (form.startTime) {
              return time.getTime() < form.startTime.getTime();
            }
            return false;
          }
        };
      },
    },
    methods: {
      getTableData(page = this.page, opts = this.form) {
        const today = this.today;
        this.start = (new Date(new Date().setHours(0, 0, 0, 0))).getTime();
        this.end = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999).getTime();
        const params = {
          loginId: this.user.id,
          operPeopleName: '',
          team: '',
          startTime: '',
          endTime: '',
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          },
        };
        if (opts) {
          Object.keys(params).forEach((key) => {
            if (opts[key]) {
              if (typeof opts[key] === 'string') {
                opts[key] = opts[key].trim();
              }
              params[key] = opts[key];
            }
          });
          const today = this.today;
          if (params.startTime) {
            params.startTime.setHours(0);
            params.startTime.setMinutes(0);
            params.startTime.setSeconds(0);
            params.startTime.setMilliseconds(0);
            params.startTime = params.startTime.getTime();
          } else {
            params.startTime = new Date(today.getFullYear(), today.getMonth(), 1, 0, 0, 0, 0).getTime();
          }
          if (params.endTime) {
            params.endTime.setHours(23);
            params.endTime.setMinutes(59);
            params.endTime.setSeconds(59);
            params.endTime.setMilliseconds(999);
            params.endTime = params.endTime.getTime();
          } else {
            params.endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999).getTime();
          }
        }
        if (this.init) {
          params.startTime = this.start;
          params.endTime = this.end;
          this.form.startTime = this.today;
          this.form.endTime = this.today;
        }
        this.$api.tel.getCountInfo(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            if (data !== null) {
              this.tableData = data.data;
              this.page.recordsTotal = data.pagecount;
            } else {
              this.tableData = [];
              this.page.recordsTotal = 0;
            }
            this.tableMaxHeight = window.document.body.clientHeight - 180;
          }
        });
      },
      search() {
        this.init = 0;
        this.getTableData({ currentPage: 1 }, this.form);
      },
      // 获取所有电核小组
      queryTeamList() {
        const params = {
          roleId: 2,
          userName: '',
          leaderId: '',
        };
        this.$api.tel.queryTeamList(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.groupList = data;
          }
        });
      },
      // 获取电核专员
      getAllUserInfo() {
        const params = {
          roleId: 1,
          userName: '',
          leaderId: '',
          loginId: this.user.id,
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.staffList = data.data;
          }
        });
      },
      // excel 导出
      exportData() {
        const params = {
          loginId: this.user.id,
          operPeopleName: '',
          team: '',
          startTime: '',
          endTime: '',
        };
        const form = this.form;
        Object.keys(params).forEach((key) => {
          if (form[key]) {
            params[key] = form[key];
          }
        });
        params.startTime.setHours(0);
        params.startTime.setMinutes(0);
        params.startTime.setSeconds(0);
        params.startTime.setMilliseconds(0);
        params.startTime = params.startTime.getTime();
        params.endTime.setHours(23);
        params.endTime.setMinutes(59);
        params.endTime.setSeconds(59);
        params.endTime.setMilliseconds(999);
        params.endTime = params.endTime.getTime();
        const user = storage.get('user');
        const language = storage.getLocal('language');
        params.language = language;
        params.token = user.token;
        console.log(apiConf.baseUrl);
        let url = apiConf.baseUrl + urlType.tel.exportCountInfo;
        console.log(url);
        url = urlUtils.fillParams(params, url, []);
        console.log(urlUtils.fillParams(params, url, []));
        window.open(url);
      },
    },
    filters: {
      // 用户类型
      switchUserType(type) {
        switch (+type) {
          case 0:
            return that.$t('common.newUser');
          case 1:
            return that.$t('common.secNewUser');
          case 2:
            return that.$t('common.oldUser');
          default:
            return '';
        }
      },
    },
    created() {
      this.getTableData({ currentPage: this.page.currentPage }, this.form);
      this.queryTeamList();
      this.getAllUserInfo();
    },
  };
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
  [data-page=tel-business]{
    .el-date-editor.el-input {
      width: 180px;
    }
    .link {
      padding: 0 5px;
    }
    .el-form-item {
      display: inline-block;
    }
    .el-table .cell, .el-table th>.cell{
      word-break: keep-all;
      word-wrap: break-word;
    }
    .searchButton {
      padding-top: 30px;
    }
  }
</style>
